<template>
    <div class="map">
        <div class="map_tit">
            <NavBar :tit="'地图找房'"></NavBar>
        </div>
        <div id="container" style="width:100%;height:600px"></div>
        <div :class="houseShow ? 'map_plots' : 'map_plots_shows' ">
            <div class="map_plots_tit">
                <h3>附近房源</h3>
                <van-icon name="ellipsis" @click="bestHouse"></van-icon>
            </div>
            <div class="map_plots_datum">
                <Houses :tit="'地图找房'"></Houses>
            </div>
        </div>
    </div>
</template>

<script>
import {getHouseDatum} from '../../api/getDatum'
import {bus} from '../../utils/Bus'
import {useRouter} from 'vue-router'
import { defineComponent ,onMounted, reactive , ref} from 'vue'
export default defineComponent({
  setup(props,context) {
      var Maps = ref('');
      let houseShow = ref(false);
      let router = useRouter()
      const mapDatum = reactive({
          posiList:[],
          searLis:[]
      })
    // 获取数据
    const getDatum = async () => {
        let mapLis = await getHouseDatum();
        mapDatum.posiList = mapLis.data.list;
    }
    //   保存地图实例
     var BMap = window.BMap;

    const initMap = () => {
        // 存储地图实例
        Maps = new BMap.Map("container");

        // 创建解析器
        var myGeo = new BMap.Geocoder();
        console.log(myGeo);
        // 解析
        myGeo.getPoint('上海',(point) => {
            // 如果地址的坐标存在
            if(point){
                // 初始化地图
                Maps.centerAndZoom(point,11);
                Maps.setMapStyleV2({     
                    styleId: '5fead7048a8e25b4d63bd3d1eef5363f'
                });
                // 添加覆盖物
                overlaysAdd()
            }
        },'上海');

        Maps.addEventListener('movestart',() => {
            houseShow.value = false;
        })
    }
    // 添加覆盖物
    const overlaysAdd = () => {
        // 遍历数据
        mapDatum.posiList.forEach(item => {
            // 给每个数据添加覆盖物
            overlayAdds(item)
        })
    }

    // 给每个位置添加覆盖物
    const overlayAdds = (item) => {
        const {house_title,latitude,longitude} = item;
        // 设置中心点
        var point = new BMap.Point(longitude,latitude);

        const opts = {
            position:point,
            offset:new BMap.Size(-28,-50)
        }

        // 添加文本
        var label = new BMap.Label('',opts);

        label.setContent(`
            <div class="plots_eve">
                <p class="plots_tit">${house_title}</p>
            </div>
        `);

        label.addEventListener('click',() => {
            mapDatum.searLis = mapDatum.posiList.filter(item => {
                return  item.house_title.indexOf(house_title) !== -1;
            })
            
            houseShow.value = true;
            getMaps()
        })

        Maps.addOverlay(label);


    }

    const getMaps = () => {
        bus.emit('getMaps',mapDatum.searLis)
    }

    // 更多房源
    const bestHouse = () => {
        router.go(-1)
    }

    onMounted(() => {
        getDatum();
        initMap();
        
    })
      
      return {    
        mapDatum,
        houseShow,
        bestHouse         
      }
  },
})
</script>

<style lang='less' scoped>
.map{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .map_tit{
        width: 100%;
        height: 60px;
    }
    #container{
        width: 300px;
        height: 500px;
    }
    .plots_eve{
        width: 70px;
        height: 30px;
        background: brown;
        .plots_tit{
            width: 100%;
            height: 100%;
            background: burlywood;
        }
    }
    .map_plots{
        width: 100%;
        height: 300px;
        position: absolute;
        bottom: 0;
        background: rgba(131, 128, 128, 0.2);
        display: flex;
        flex-direction: column;
        transition: all .5s;
        .map_plots_tit{
            width: 100%;
            height: 40px;
            background: rgba(223, 209, 209, 0.2);
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ccc;
            h3{
                font-size: 14px;
            }
            i{
                color: #ccc;
                font-size: 30px;
                font-weight: bold;
            }
        }
        .map_plots_datum{
            flex: 1;
            overflow-y: auto;
        }
    }
    .map_plots_shows{
        position: absolute;
        transition: all .5s;
        transform: translateY(100%); 

    }
    
}
</style>
